<template>
    <el-container style="width:1100px">

        <el-card style="margin: 0 20px">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane label="全部订单" name="1"></el-tab-pane>
                <el-tab-pane label="待付款" name="2"></el-tab-pane>
                <el-tab-pane label="待评价" name="3"></el-tab-pane>
                <el-tab-pane label="待服务/发货" name="4"></el-tab-pane>
                <el-tab-pane label="待确认" name="5"></el-tab-pane>
                <el-tab-pane label="退款/售后" name="6"></el-tab-pane>
            </el-tabs>
        </el-card>

        <el-main>
            <el-card shadow="always" style="height:600px">
                <el-form inline style="margin:10px">
                    <el-form-item>
                        <el-input style="width:300px" v-model="input" size="large" :prefix-icon="Search" />
                    </el-form-item>
                    <el-form-item>
                        <el-button size="large">搜索</el-button>
                    </el-form-item>
                </el-form>

                <el-table>
                    <el-table-column align="center" label="订单信息" width="400px"></el-table-column>
                    <el-table-column align="center" label="购买数量"></el-table-column>
                    <el-table-column align="center" label="单价"></el-table-column>
                    <el-table-column align="center" label="实付"></el-table-column>
                    <el-table-column align="center" label="状态"></el-table-column>
                    <el-table-column align="center" label="操作"></el-table-column>
                </el-table>
            </el-card>
        </el-main>

    </el-container>
</template>

<script setup lang="ts">
import { ref } from "vue"
import type { TabsPaneContext } from 'element-plus'
import { Search } from "@element-plus/icons-vue"

const activeName = ref('1')
const input = ref('')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</script>

<style scoped>
.el-container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
</style>
